<template>
    <div class="container">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <img src="@/assets/imgs/flight/inter2.png" style="width:1200px;height: 290px" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: left;">
          <div class="grid-content bg-purple-dark">
            <el-select v-model="selected" placeholder="审核状态" style="width:200px; margin-top:5px;">
              <el-option label="未审核" value="2"></el-option>
              <el-option label="审核通过" value="0"></el-option>
              <el-option label="审核不通过" value="3"></el-option>
            </el-select>
            <el-button type="primary" class="search-btn" @click="fetchData" style="margin-left:20px;">确认</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" stripe class="tableBox">
            <el-table-column prop="cfno" label="航班号" align="center"></el-table-column>
            <el-table-column prop="startapcd" label="始发站" align="center"></el-table-column>
            <el-table-column prop="startfptt" label="预计起飞时间" align="center"></el-table-column>
            <el-table-column prop="endapcd" label="终点站" align="center"></el-table-column>
            <el-table-column prop="endfplt" label="预计到达日期" align="center"></el-table-column>
            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button 
                  :type="getButtonType(scope.row.status)" 
                  plain 
                  size="small" 
                  @click="handleButtonClick(scope.row)">
                  {{ getButtonLabel(scope.row.status) }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pageList"
            :page-sizes="[8, 16, 24, 32]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page.sync="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import request from '@/utils/request';
  import { onMounted, ref } from 'vue';
  import { ElMessage ,ElMessageBox} from 'element-plus';
  
  const tableData = ref([]);
  const total = ref(0);
  const currentPage = ref(1);
  const pageSize = ref(8);
  const selected = ref('2');
  
  const fetchData = () => {
    currentPage.value = 1; // Reset to first page
    getTableData();
  };
  
  const getTableData = () => {
    request({
      url: '/apply/audittickets', // 替换为实际 API 接口
      method: 'get',
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        status: selected.value,
      },
    }).then(res => {
      if (res.data.errorCode == 200) {
        tableData.value = res.data.data.records; // 使用ref变量的值
        total.value = res.data.data.total; // 使用ref变量的值
      }
    }).catch(error => {
      console.error('Error fetching data:', error);
    });
  };
  
  const handleSizeChange = (size) => {
    pageSize.value = size;
    getTableData();
  };
  
  const handleCurrentChange = (page) => {
    currentPage.value = page;
    getTableData();
  };
  
  const getButtonType = (status) => {
    switch (status) {
      case 2:
        return 'primary'; // 待审核
      case 0:
        return 'success'; // 审核通过
      case 3:
        return 'danger'; // 审核不通过
      default:
        return 'default';
    }
  };
  
  const getButtonLabel = (status) => {
    switch (status) {
      case 2:
        return '待审核';
      case 0:
        return '审核通过';
      case 3:
        return '审核未通过';
      default:
        return '未知';
    }
  };
  
 
const handleButtonClick = (row) => {
  ElMessageBox.confirm(`确认更改航班 ${row.cfno} 的审核状态吗？`, '提示', {
    confirmButtonText: '通过',
    cancelButtonText: '拒绝',
    cancelButtonClass: 'el-button--danger', // 设置拒绝按钮为红色
    type: 'warning',
    showCancelButton: true,
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false,
  }).then(() => {
    // 发送请求修改状态为审核通过
    request({
      url: '/apply/updateStatus', // 替换为实际 API 接口
      method: 'post',
      data: {
        id: row.id, // 根据实际情况传递航班id或其他标识符
        status: 0, // 0 表示审核通过
      },
    }).then(res => {
      if (res.data.errorCode == 200) {
        ElMessage.success('航班审核已通过');
        fetchData(); // 刷新数据
      } else {
        ElMessage.error('操作失败');
      }
    }).catch(error => {
      console.error('Error updating status:', error);
      ElMessage.error('操作失败');
    });
  }).catch(action => {
    if (action === 'cancel') {
      // 发送请求修改状态为审核不通过
      request({
        url: '/apply/updateStatus', // 替换为实际 API 接口
        method: 'post',
        data: {
          id: row.id, // 根据实际情况传递航班id或其他标识符
          status: 3, // 3 表示审核不通过
        },
      }).then(res => {
        if (res.data.errorCode == 200) {
          ElMessage.info('航班审核已拒绝');
          fetchData(); // 刷新数据
        } else {
          ElMessage.error('操作失败');
        }
      }).catch(error => {
        console.error('Error updating status:', error);
        ElMessage.error('操作失败');
      });
    } else {
      ElMessage.info('已取消更改');
    }
  });
};

  
  onMounted(() => {
    getTableData();
  });
  </script>
  
  <style scoped>
  .container {
    max-height: 100vh;
  }
  
  .tableBar {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  </style>
  